<template>
    <div>
        <h1>会员权益增加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">权益名称</td>
                    <td><input type="text" v-model="queryInfo.RightName"></td>
                </tr>

                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" name="state" v-model="queryInfo.State" :value="1">开启
                        <input type="radio" name="state" v-model="queryInfo.State" :value="0">禁用
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="修改" @click="ok"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router';

onMounted(() => {
    getdate();
})

const getdate = () => {
    axios({
        url:'/api/Member/GetMemberRight',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then((res) => {
        console.log(res);
        queryInfo.RightName = res.data.RightName;
        queryInfo.State = res.data.State;
    })
    .catch((err) => {
        console.log(err);
    })
}

const router = useRouter();
const route = useRoute();

//声明向后端传递的响应式数据
let queryInfo = reactive({
    Id: route.query.id,
  RightName: '',
  State: 1,
})

const ok = () => {
    if(queryInfo.RightName == '') 
    {
        alert('会员权益不能为空');
        return;
    }
    axios({
        url:'/api/Member/GetMemberRightUpd',
        method:'put',
        data:queryInfo
    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1)
        {
            alert('该权益已存在');
            return;
        }
        if(res.data==1)
        {
            alert('修改成功');
            router.push('/memberqy')
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>